<template>
<div>
  <!--首页轮播-->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="lunbo in lunboData">
        <img :src="lunbo.img"/>
      </div>
    </div>
    <!--如果需要分页器-->
    <!--<div class="swiper-pagination"></div>-->
    <!--如果需要导航按钮-->
    <!--<div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>-->
    <!--如果需要滚动条-->
    <!--<div class="swiper-scrollbar"></div>-->

  </div>
  <!--hot test-->
  <div class="cageCenter">
    <p class="cageHot"><span>{{msg1}}</span>{{msg2}}</p>
    <ul class="cgHotData">

      <li v-for="hotDa in hotData">
        <router-link :to="hotDa.cagepath">
        {{hotDa.test}}
        </router-link>

      </li>
    </ul>
  </div>
  <!--photoHot-->
  <ul class="photoHot">
    <li v-for="cagePhoto in photoHot">
      <router-link :to="cagePhoto.photopath">
        <img :src="cagePhoto.Hotphoto"/>
        <p>{{cagePhoto.Hottext}}</p>
      </router-link>
    </li>
  </ul>
</div>
</template>
<script>
  import '../../static/js/swiper.min.js'
export default{
      name:'cagetest',
      data(){
          return{
              lunboData:[
                {img:'../../static/img/lunbo1.png'},
                {img:'../../static/img/lunbo2.png'},
                {img:'../../static/img/lunbo3.png'}
              ],
            msg1:'|',
            msg2:'热门评测标签',
            hotData:[
              {test:'水果',cagepath:'cagefruit'},
              {test:'速食',cagepath:'fastfood'},
              {test:'瘦身',cagepath:'thinbody'},
              {test:'健康',cagepath:'health'},
              {test:'肉食',cagepath:'meat'},
              {test:'雪糕',cagepath:'iceCream'},
              {test:'零食',cagepath:'snacks'},
              {test:'能量',cagepath:'prana'},
            ],
            photoHot:[
              {
                  Hotphoto:'../../static/img/cageHot.png',
                  Hottext:'搭乘飞机以及时光机探索台湾零食',
                  photopath:'cgphoto1'
              },
              {
                Hotphoto:'../../static/img/cageHot2.png',
                Hottext:'哈根达斯雪糕最新线报！一口飞到法国原...',
                photopath:'cgphoto1'
              },
              {
                Hotphoto:'../../static/img/cageHot3.png',
                Hottext:'粽子能不能当早餐？',
                photopath:'cgphoto1'
              },
              {
                Hotphoto:'../../static/img/cageHot4.png',
                Hottext:'绿油油的味蕾历险记',
                photopath:'cgphoto1'
              },
              {
                Hotphoto:'../../static/img/cageHot5.png',
                Hottext:'一口入夏|那些凉凉的小确治愈',
                photopath:'cgphoto1'
              },
              {
                Hotphoto:'../../static/img/cageHot6.png',
                Hottext:'治愈系零食--樱&季节限定',
                photopath:'cgphoto1'
              },
              {
                Hotphoto:'../../static/img/cageHot7.png',
                Hottext:'能量棒--超乎想象的power',
                photopath:'cgphoto1'
              },
              {
                Hotphoto:'../../static/img/cageHot8.png',
                Hottext:'这是一篇正经的肉文',
                photopath:'cgphoto1'
              },
              {
                Hotphoto:'../../static/img/cageHot9.png',
                Hottext:'酸甜有道的一些酱',
                photopath:'cgphoto1'
              },
              {
                Hotphoto:'../../static/img/cageHot10.png',
                Hottext:'来，干了这碗毒鸡汤',
                photopath:'cgphoto1'
              },
            ]
          }
      },
      mounted () {
          var swiper = new Swiper('.swiper-container',{
              autoplay:1000,
              scrollbarHide:false,
              autoplayDisableOnInteraction:false,
              loop:true,
              pagination:'.swiper-pagination'
         })
      }
}
</script>
<style scoped lang="less">
  @import'../assets/css/swiper.min.css';
  @import'../assets/css/reset.css';
  @import '../assets/css/cagelunbo.less';
</style>
